<template>
  <div class="qh">
     <div v-for="(v,index) in arr" :key="index" >
        <p>{{v.one}}</p>
        <p @click="fun(index)" :class="myindex==index?mybgc:null">{{ v.two }}</p>
     </div>
  </div>
</template>

<script>
export default {
    data(){
     return {
        arr:[
           {
             one:"热卖中",
             two:"实施热抢"
           },
           {
            one:"14:00",
            two:"抢购中"
           },
           {
            one:"20:00",
            two:"即将开始"
           }
        ],
        mybgc:"bgc",
        myindex:0
     }
    },
    methods:{
        fun(index){
            this.myindex = index
        }
    }

}
</script>

<style scoped>
.qh {
    display: flex;

}
.qh div {
    width: 33%;
    text-align: center;
}
.qh div p:first-child {
    font-size: 14px;
    font-weight: bold;
    margin:7px 0 ;
}
.qh div p:last-child {
    font-size: 12px;
    color:#999; 
    width: 75px;
    height: 25px;
    border-radius:5px ;  
    margin: 0 23px;
    line-height: 25px;
}
.bgc {
    background: red;
    color: #fff;
    
}
</style>